<template>
	<el-container>
		<el-aside width="8%" class="nav-bar">
			<div class="logo-container">
				<!-- 分类 -->
				<div class="logo-item" @click="navigation(1)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589930950" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="9947" width="50" height="50">
							<path
								d="M575.68 736a160.32 160.32 0 1 0 160.32-160.32H599.893333c-13.461333 0-24.192 10.752-24.192 24.192V736zM736 533.333333A202.666667 202.666667 0 1 1 533.333333 736V599.893333A66.432 66.432 0 0 1 599.872 533.333333H736zM490.666667 736a202.666667 202.666667 0 1 1-202.666667-202.666667h136.128A66.432 66.432 0 0 1 490.666667 599.872V736z m-202.666667-160.32a160.32 160.32 0 1 0 160.32 160.32V599.893333c0-13.44-10.730667-24.192-24.192-24.192H288zM533.333333 287.978667A202.666667 202.666667 0 1 1 736 490.666667H599.893333A66.432 66.432 0 0 1 533.333333 424.128V288z m202.666667 160.341333a160.32 160.32 0 1 0-160.32-160.32v136.128c0 13.44 10.730667 24.192 24.192 24.192H736zM448.32 288a160.32 160.32 0 1 0-160.32 160.32h136.128c13.461333 0 24.192-10.752 24.192-24.192V288zM288 490.666667A202.666667 202.666667 0 1 1 490.666667 288v136.128A66.432 66.432 0 0 1 424.128 490.666667H288z"
								fill="#1296db" p-id="9948"></path>
						</svg>
					</svg>
					<span style="color: #1296db;">分类</span>
				</div>
				<!-- 商品 -->
				<div class="logo-item" @click="navigation(2)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589137588" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="5353" width="50" height="50">
							<path
								d="M832 256H640V160.8c0-17.6-14.4-32.8-32.8-32.8H416c-17.6 0-32.8 14.4-32.8 32.8V256H192l-64 576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64l-64-576z m-384-64h128v64H448v-64z m326.4 128l56.8 512H192l56.8-512"
								p-id="5354" fill="#e6e6e6"></path>
							<path d="M447.2 352.8H384V416h63.2v-63.2zM640 352.8h-63.2V416H640v-63.2z" p-id="5355"
								fill="#e6e6e6"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">商品</span>
				</div>
				<!-- 订单 -->
				<div class="logo-item" @click="navigation(3)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589228580" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="6429" width="50" height="50">
							<path
								d="M800.037628 928.016126 223.962372 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l575.903242 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 639.892491C896.021502 884.840585 852.84596 928.016126 800.037628 928.016126zM223.962372 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-639.892491c0-17.545439-14.277171-31.994625-31.994625-31.994625L223.962372 159.973123z"
								fill="#e6e6e6" p-id="6430"></path>
							<path
								d="M640.924576 544.768688 287.779607 544.768688c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l353.144969 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C672.9192 530.491517 658.642029 544.768688 640.924576 544.768688z"
								fill="#e6e6e6" p-id="6431"></path>
							<path
								d="M734.84428 735.532337l-447.236687 0c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l447.236687 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S752.561734 735.532337 734.84428 735.532337z"
								fill="#e6e6e6" p-id="6432"></path>
							<path
								d="M255.784982 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S255.784982 278.834873 255.784982 305.325046z"
								fill="#e6e6e6" p-id="6433"></path>
							<path
								d="M463.061986 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S463.061986 278.834873 463.061986 305.325046z"
								fill="#e6e6e6" p-id="6434"></path>
							<path
								d="M671.199059 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S671.199059 278.834873 671.199059 305.325046z"
								fill="#e6e6e6" p-id="6435"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">订单</span>
				</div>
				<!-- 我的 -->
				<div class="logo-item" @click="navigation(4)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589429644" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="7489" width="50" height="50">
							<path
								d="M586.945923 513.581008c55.067176-27.962865 92.91211-85.125773 92.91211-150.998039 0-93.338828-75.937506-169.276335-169.277358-169.276335s-169.275311 75.937506-169.275311 169.276335c0 65.872267 37.844933 123.034151 92.911086 150.998039-95.652524 32.016181-164.778904 122.45496-164.778904 228.743728 0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707c0-110.36869 89.791026-200.160739 200.160739-200.160739S710.741413 631.956046 710.741413 742.324736c0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707C751.723803 636.035968 682.598446 545.598212 586.945923 513.581008zM382.287753 362.582969c0-70.742181 57.552787-128.293945 128.292921-128.293945 70.742181 0 128.293945 57.552787 128.293945 128.293945 0 70.741157-57.552787 128.292921-128.293945 128.292921C439.84054 490.876913 382.287753 433.324126 382.287753 362.582969z"
								fill="#e6e6e6" p-id="7490"></path>
							<path
								d="M827.871087 196.127889C743.498468 111.757317 631.320573 65.290005 512 65.290005S280.500509 111.756293 196.128913 196.127889C111.756293 280.501532 65.291029 392.678404 65.291029 511.998977s46.465265 231.499491 130.837884 315.872111 196.550515 130.837884 315.871087 130.837884 231.498468-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 511.998977 912.243707 280.500509 827.871087 196.127889zM512 917.726581c-223.718271 0-405.726581-182.007287-405.726581-405.727605 0-223.718271 182.00831-405.726581 405.726581-405.726581s405.726581 182.007287 405.726581 405.726581C917.726581 735.719294 735.718271 917.726581 512 917.726581z"
								fill="#e6e6e6" p-id="7491"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">我的</span>
				</div>
				<!-- 工具 -->
				<div class="logo-item" @click="navigation(5)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589731055" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="8858" width="50" height="50">
							<path
								d="M928 257.7H768v-97.4c0-35.3-28.7-64-64-64H320c-35.3 0-64 28.7-64 64v97.4H96c-17.7 0-32 14.3-32 32v606c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32v-606c0-17.7-14.3-32-32-32z m-608-97.4h384v97H320v-97z m576 703.4H128v-271h281v60c0 17.7 14.3 32 32 32h142c17.7 0 32-14.3 32-32v-60h281v271z m-423-243v-120h78v120h-78z m423-92H615v-60c0-17.7-14.3-32-32-32H441c-17.7 0-32 14.3-32 32v60H128v-207h768v207z"
								fill="#e6e6e6" p-id="8859"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">工具</span>
				</div>
			</div>
		</el-aside>
		<el-main>
			<el-row>
				<el-col :span="24">
					
					<div class="content-right">
						<svg t="1715679815754" class="icon" viewBox="0 0 1118 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="4222" width="30" height="30" @click="navigation(1)">
							<path
								d="M229.419389 558.545455 1070.545455 558.545455C1096.251802 558.545455 1117.090909 537.706344 1117.090909 512 1117.090909 486.293656 1096.251802 465.454545 1070.545455 465.454545L229.419389 465.454545 544.912606 149.961328C563.089738 131.784198 563.089738 102.313246 544.912606 84.136115 526.735475 65.958984 497.264525 65.958984 479.087394 84.136115L84.136115 479.087394C75.04755 488.175959 70.503267 500.087979 70.503267 512 70.503267 523.912021 75.04755 535.824041 84.136115 544.912606L479.087394 939.863887C497.264525 958.041014 526.735475 958.041014 544.912606 939.863887 563.089738 921.686754 563.089738 892.215802 544.912606 874.038672L229.419389 558.545455Z"
								fill="#2c2c2c" p-id="4223"></path>
						</svg>
						<!-- 头像 -->
						<div class="avatar">
							<el-dropdown @command="logout">
								<el-avatar :size="60" :src="this.userInfo.avatar"></el-avatar>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="a">更改信息</el-dropdown-item>
									<el-dropdown-item @click="logout()" command="b">退出登录</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<!-- 新增类别按钮 -->
						<div class="addButton">
							<el-button plain @click="showCommodityDialog()">新增商品</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="block">
				<el-table :data="commodityList">
					<!-- 表格列 -->
					<el-table-column prop="id" label="ID"></el-table-column>
					<el-table-column prop="name" label="商品名称"></el-table-column>
					<el-table-column prop="describe" label="说明"></el-table-column>
					<el-table-column label="图片">
						<template slot-scope="scope">
							<img :src="scope.row.img1" alt="图片" style="width: 100px; height: auto;">
						</template>
					</el-table-column>
					<el-table-column prop="price" label="价格"></el-table-column>
					<el-table-column prop="inventory" label="数量"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<div>
								<el-link type="danger" @click="deleteCommodityByClassification(classificationId, scope.row.id)">移除商品</el-link>
							</div>
						</template>
					</el-table-column>
					<!-- 其他表格列 -->
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[2, 5, 10, 100]" :page-size="5"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
				<!-- 新增商品弹出层 -->
				<el-dialog title="新增商品" :visible.sync="commodityDialogVisible" width="80%"
					:before-close="commodityHandleClose">
					<el-form ref="form" :model="commodity" label-width="100px">
						<el-form-item label="商品名称">
							<el-select v-model="commodity.id" placeholder="请选择">
								<el-option v-for="item in commodityClassicationList" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button @click="addCommodityByClassification">提交</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
			</div>
		</el-main>
	</el-container>
</template>


<script>
	import axios from 'axios';
	axios.interceptors.request.use(config => {
		const token = localStorage.getItem('token');
		console.log(token);
		if (token) {
			config.headers.token = `${token}`;
		}
		return config;
	});
	export default {
		data() {
			return {
				userInfo: {
					id: null,
					tele: null,
					name: null,
					password: null,
					avatar: null,
					qq: null,
					wechat: null,
					status: null,
				},
				commodityDialogVisible: false,
				classificationId: null,
				classification: {
					id: null,
					name: null,
					describe: null,
					merchantId: null,
				},
				commodityList: [],
				commodity: {
					id: null,
					name: null,
					describe: null,
					img1: null,
					img2: null,
					img3: null,
					price: null,
					inventory: null,
					merchant: null,
				},
				total: null,
				classificationList: [],
				commodityClassicationList:[],
				
				page: 1,
				pageSize: 5,
			}

		},
		created() {
			//根据商家id查询商家信息
			this.getMerchantById();
			//获取分类id
			this.getClassificationId();
		},

		methods: {
			/**
			 * 退出登录
			 */
			logout(command) {
				if (command == 'a') {
					this.$router.push('/merchant_my');
				} else {
					// 清除本地存储中的 Token
					localStorage.removeItem('token');
					this.$router.push('/');
				}
			},
			navigation(num) {
				if (num == 1) {
					this.$router.push('/merchant_index');
				} else if (num == 2) {
					this.$router.push('/merchant_commodity');
				} else if (num == 3) {
					this.$router.push('/merchant_order');
				} else if (num == 4) {
					this.$router.push('/merchant_my');
				} else {
					this.$router.push('/merchant_tool');
				}
			},
			//根据分类查询商品
			getCommodityByClassification() {
				try {
					const url = "http://81.70.99.233:8090/commodity/classification/" + this.classificationId +
						"?page=" + this.page + "&pageSize=" + this.pageSize;
					const response = axios.get(url, {}).then(
						response => {
							const responseData = response.data;
							this.commodityList = responseData.records;
							this.total = responseData.total;
						});
				} catch (error) {
					console.error('获取商家分类信息：', error);
				}
			},
			/**
			 * 根据url获取分类id
			 */
			getClassificationId() {
				this.classificationId = this.$route.query.id;
				this.getCommodityByClassification();
				// alert(this.classificationId);
			},
			// 监听pagesize改变的事件
			handleSizeChange(newSize) {
				this.pageSize = newSize;
				this.getCommodityByClassification();
			},

			//监听多少页值改变的事件
			handleCurrentChange(newPage) {
				this.page = newPage;
				console.log("当前应该跳转到" + newPage);
				this.getCommodityByClassification();
			},
			
			//删除某分类下的商品
			deleteCommodityByClassification(classification,commodity) {
				this.$confirm('移除后，所属商品将会被转为默认类别, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					try {
						
						const url = "http://81.70.99.233:8090/commodity/classification/" + classification + "/" + commodity;
						console.log(url);
						
						const response = axios.delete(url, {}).then(response => {
							if (response.data.code == 1) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
							} else {
								this.$message({
									type: 'error',
									message: response.data.msg
								});
							}
							// 刷新当前页面
							location.reload();
						});
					} catch (error) {
						console.error('删除接口调用失败：', error);
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			
			//在某分类下新增商品
			addCommodityByClassification() {
				const url = 'http://81.70.99.233:8090/commodity/classification/' + this.classificationId + '/' + this.commodity.id;
					axios.post(url)
						.then(response => {
							if(response.data.code == 1) {
								this.$message({
									showClose: true,
									message: "添加成功",
									type: 'success'
								});
								// 刷新当前页面
								location.reload();
								this.commodityDialogVisible = false;
							} else{
								this.$message({
									showClose: true,
									message: response.data.msg,
									type: 'error'
								});
							}
						})
						.catch(error => {
							// 请求失败处理逻辑
							console.error('添加类别失败', error);
						});
				},
				
				/**
				 * 打开新增商品弹出层
				 */
				showCommodityDialog() {
					this.commodityDialogVisible = true;
					this.getCommodityByMerchant();
				},
				
				/**
				 * 关闭新增商品弹出层
				 */
				commodityHandleClose() {
					// 在这里可以处理一些关闭弹出层前的逻辑
					this.commodityDialogVisible = false;
				},
				
				//根据商家id查询商品
				getCommodityByMerchant() {
					try {
						const url = "http://81.70.99.233:8090/commodity/merchant/" +
							"?page=" + 1 + "&pageSize=" + 1000;
						const response = axios.get(url, {}).then(
							response => {
								const responseData = response.data;
								this.commodityClassicationList = responseData.records;
								this.total = responseData.total;
							});
					} catch (error) {
						console.error('获取商家分类信息：', error);
					}
				},
				//根据id查询商家
				getMerchantById() {
					try {
						const url = "http://81.70.99.233:8090/merchant/getMerchantById";
						const response = axios.get(url, {}).then(
							response => {
								const responseData = response.data;
								this.userInfo = responseData.data;
							});
					} catch (error) {
						console.error('获取商家信息：', error);
					}
				},
			},
	}
</script>

<style scoped>
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		/* 设置为视窗的高度 */
		background-color: #333;
		/* 背景颜色 */
	}

	.logo-container {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		/* logo之间均匀间隔 */
		height: 100%;
		/* 充满整个导航栏的高度 */
	}

	.logo-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	}
	
	.logo {
		margin-bottom: 5px;
		/* 与文字的间隔 */
	}

	.content-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 60px;
	}

	.icon {
		margin-right: auto; /* 将SVG元素固定在最左侧 */
	}

	.avatar {
		margin-right: 30px;
		/* 在头像和按钮之间添加30px的间隔 */
	}	
</style>